<template>
    <div>
        <TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
        <div class="container">
            
            <TableCustom :columns="columns" :tableData="tableData" :total="page.total"
            :changePage="changePage" :currentPage="page.page" :pageSize="page.page_size" :hasPagination="false">
                <template #toolbarBtn>
                    <el-button type="warning" :icon="CirclePlusFilled" @click="addnewUser">新增</el-button>
                </template>
                <template #h_status="{rows}">
                    <!-- <el-switch
                        v-model="rows.h_status"
                        size="large"
                        active-text=""
                        inactive-text=""
                    /> -->
                    <el-tag v-if="rows.h_status == 1" type="success">正常</el-tag>
                    <el-tag v-else type="danger">禁用</el-tag>
                </template>
                <template #operator="{rows}">
                    <el-button type="primary" @click="handleEdit(rows)">编辑用户</el-button>
                    <el-button type="warning" @click="handleDelete(rows)">重置密码</el-button>
                    <el-button :type="rows.h_status == 1 ? 'danger': 'success'" @click="changeUserStatus(rows)">{{rows.h_status == 1 ? '禁用' : '启用'}}</el-button>

                </template>
            </TableCustom>
            <el-dialog :title="isEdit ? '编辑' : '新增'" v-model="visible" width="700px" destroy-on-close
                :close-on-click-modal="false" @close="closeDialog">
                <TableEdit :form-data="rowData" :options="options" :edit="isEdit" :update="updateData"/>
            </el-dialog>
        </div>
    </div>
</template>

<script setup lang="ts" name="collaborativeAdministrator-user">
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { CirclePlusFilled } from '@element-plus/icons-vue';
import { Place } from './types/cooperUser.js';
import { query_user_list, query_role_list, register_user, update_user_password, stop_user } from '@/api';
import TableCustom from '@/components/table-custom.vue';
import TableSearch from '@/components/table-search.vue';
import { FormOption, FormOptionList } from '@/types/form-option';

// 查询相关
const query = reactive({
    h_status: null,
    h_user_name: null,
    h_real_name: null,
    h_role: null
});
// 查询条件相关
const searchOpt = ref<FormOptionList[]>([
    { type: 'select', label: '用户状态：', prop: 'h_status', placeholder: '请选择用户状态', opts: [{label: '禁用', value: -1},{label: '正常', value: 1}]},
    { type: 'input', label: '用户名：', prop: 'h_user_name', placeholder: '请输入用户名' },
    { type: 'input', label: '姓名：', prop: 'h_real_name', placeholder: '请输入姓名' },
    { type: 'select', label: '角色：', prop: 'h_role', placeholder: '请选择角色', opts: [], labelItem: 'r_name', valueItem: 'r_code'},
])
query_role_list({}).then(res => {
    searchOpt.value[3].opts = res.data
})

console.log(searchOpt)
const handleSearch = () => {
    console.log(query)
    changePage(1);
};

// 表格相关
let columns = ref([
    // { prop: 'h_user_id', label: '用户id' },
    { prop: 'h_real_name', label: '真实姓名' },
    { prop: 'h_user_name', label: '用户名称' },
    { prop: 'h_telphone', label: '用户电话' },
    { prop: 'h_user_info', label: '用户信息' },
    { prop: 'r_name', label: '角色名' },
    { prop: 'responsible_name', label: '领导名称' },
    {prop: 'h_status', label: '用户状态'},
    { prop: 'operator', label: '操作', width: 300 },
])

const changeUserStatus = (row) => {
    let messageInfo = row.h_status == -1 ? '确认要启用用户' : '确认要禁用用户'
    let sendState =  row.h_status == -1 ? '1' : '-1'
    ElMessageBox.confirm(messageInfo, '提示', {
        type: 'warning'
    })
        .then(async () => {
            stop_user({h_user_id: row.h_user_id, h_status: sendState }).then(res => {
                if (res.code == 1000) {
                    getData();
                    ElMessage.success('操作成功');
                }
            })
        })
        .catch(() => { });
}
const page = reactive({
    page: 1,
    page_size: 10,
    total: 0,
})
const tableData = ref<Place[]>([]);
const getData = async () => {
    const res = await query_user_list({...query})
    tableData.value = res.data;
    // page.total = res.data.total;
};
getData();

const changePage = (val: number) => {
    page.page = val;
    getData();
};

// 新增/编辑弹窗相关
let options = ref<FormOption>({
    labelWidth: '150px',
    span: 20,
    list: [
        { type: 'input', label: '真实姓名', prop: 'h_real_name', required: true, placeholder: '请输入真实姓名' },
        { type: 'input', label: '用户名称', prop: 'h_user_name', required: true, placeholder: '请输入用户名称' },
        { type: 'input', label: '用户电话', prop: 'h_telphone', required: true, placeholder: '请输入用户电话' },
        { type: 'select', label: '领导名称', prop: 'h_responsible_id', required: false, placeholder: '请选择领导' },
        { type: 'select', label: '角色名', prop: 'h_role', required: true, placeholder: '请选择角色', opts: [], labelItem: 'r_name', valueItem: 'r_code'},
        { type: 'textarea', label: '用户信息', prop: 'h_user_info', required: false, placeholder: '请输入用户信息' },
    ]
})

const visible = ref(false);
const isEdit = ref(false);
const rowData = ref({});
const handleEdit = (row) => {
    query_role_list({}).then(res => {
        options.value.list[4].opts = res.data
        rowData.value = { ...row };
        isEdit.value = true;
        visible.value = true;
    })
   
};
const addnewUser = () => {
    query_role_list({}).then(res => {
        options.value.list[4].opts = res.data
        console.log(options.value.list)
        visible.value = true;
    })
}
const updateData = async(value) => {

    const sentData = JSON.parse(JSON.stringify(value))
    delete sentData.h_status
    delete sentData.r_name 
    delete sentData.responsible_name
    const res = await register_user(sentData)
    if (res.code == '1000') {
        closeDialog();
        getData();
    }

};
const closeDialog = () => {
    visible.value = false;
    isEdit.value = false;
};




// 删除相关
const handleDelete = (row: Place) => {
    ElMessageBox.confirm('确认要重置密码', '提示', {
        type: 'warning'
    })
        .then(async () => {
            update_user_password({h_user_id: row.h_user_id }).then(res => {
                if (res.code == 1000) {
                    ElMessage.success('重置密码成功');
                }
            })
        })
        .catch(() => { });
    
}
</script>

<style scoped></style>